<template>
    <div>
        <a-card style="min-height: 800px;">
            <p slot="title">
                安全介质详情
            </p>
            <div class="syMsg"  style="border-bottom: 0px">
                <div class="syMsgTit">安全介质管理</div>
                <div class="syMsgCot">
                    <a-form :form="form" class="onePageMsg">
                        <a-form-item v-bind="formStyle" label="安全介质序列号" required>
                           <!-- <a-input  class="formWidth"
                                    placeholder="请输入安全介质序列号"
                                    ref="refocus"
                                    v-decorator="[
                        'sn',
                        {   rules: [{ required: true, message: '请输入字母、数字、_或-字符' },{validator:this.verify.validateID.bind(this)}],
                            getValueFromEvent: (event) => {
                                return this.verify.formalSpace(event)
                            }
                         }
                    ]"
                            />-->
                            <a-select placeholder="请选择安全介质序列号" allowClear style="width: 360px;"
                                      v-decorator="['sn',  { rules: [{ required: true, message: '请选择安全介质序列号' }] }]">
                                <a-select-option v-for="item in snList" :value="item" :key="item">{{item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item v-bind="formStyle" label="验证算法" required :extra="errMsg">
                            <a-checkbox-group :options="algList" v-model="checkedLogList" @change="onChangeTypeLog" style="width: 180px; line-height: 32px;" />
                        </a-form-item>
                        <a-form-item label=" " v-bind="formStyle" class="noLabelAfter">
                            <a-button type="primary" @click="confirm">验证</a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
            <div class="algList" v-if="showResult">
                <dl>
                    <dt>验证算法</dt>
                    <dd>
                        <div class="allSpan">
                            <span v-for="(item,index) in info" :key="index">{{item.algName | filterWord(algList)}}：(<a-icon :type="item.result === 'ok'?'check':'close'" :class="item.result === 'ok'?'green':'red'"/>)</span>
                        </div>
                    </dd>
                </dl>
            </div>
        </a-card>
        <div class="spinBox" v-if="spinning">{{spinText}}</div>
    </div>
</template>

<script>
    import verify from 'libs/verify'
    export default {
        name: 'safeMedium',
        data () {
            return {
                form: this.$form.createForm (this),
                verify,
                spinning: false,
                spinText: '请稍后...',
                algList: [ {value: 'random', label: '随机数'},
                    {value: 'SM2-encrypt', label: 'SM2加解密'},
                    {value: 'SM2-sig', label: 'SM2签名验签'},
                    {value: 'RSA-encrypt', label: 'RSA加解密'} ,
                    {value: 'RSA-sig', label: 'RSA签名验签'},
                    {value: 'SM3', label: 'SM3运算'},
                    {value: 'SHA256', label: 'SHA-256运算'},
                    {value: 'SM4', label: 'SHA-SM4加解密'} ],
                id:0,
                checkedLogList:[],
                showArrow:false,
                formStyle: {
                    labelCol: {span: 5},
                    wrapperCol: {span:19}
                },
                snList:[],
                errMsg:'',
                type:'',
                showResult:false,
                info:[ {algName: 'random', result: 'ok'},
                    {algName: 'SM2-encrypt', result: 'SM2加解密'},
                    {algName: 'SM2-sig', result:'ok'},
                    {algName: 'RSA-encrypt', result: 'RSA加解密'} ,
                    {algName: 'RSA-sig', result: 'RSA签名验签'},
                    {algName: 'SM3', result: 'SM3运算'},
                    {algName: 'SHA256', result: 'SHA-256运算'},
                    {algName: 'SM4', result: 'SHA-SM4加解密'} ]
            }
        },
        filters: {
            filterWord(value, list) {
                for (let i=0; i<list.length; i++) {
                    if (value === list[i].value) {
                        return list[i].label
                    }
                }
            },
        },
        created () {
            let _this = this
            this.init ()
        },
        methods: {
            onChangeTypeLog (checkedList) {
               console.log(checkedList)
            },

            /**
             * Function    : init
             * Description : 初始化列表
             * Input       : none
             * Return      : none
             */
            init () {
                let _this = this
                this.snList = []
                this.$get('/vpn/queySecStoreInfo').then(res => {
                    if (res.code === 0) {
                        this.snList.push(res.data.sn)
                        this.type=res.data.type
                    } else {
                        _this.$message.error(res.message)
                    }
                })
            },
            /**
             * Function    : confirm
             * Description : 表单提交
             * Input       : data
             * Return      : none
             */
            confirm (e) {
                e.preventDefault();
                if(this.checkedLogList.length === 0){
                    this.errMsg = '请选择验证算法'
                    return
                }
                this.form.validateFields((err, value) => {
                    let _this = this
                    if (!err) {
                        let prams = {
                            type:this.type, //encryptionCard  和 secureChip 可选
                            sn:value.sn,
                            algorithms:this.checkedLogList,
                        }
                        _this.$post('/vpn/verifySecStore',prams).then(res => {
                            if (res.code === 0) {
                                _this.showResult = true
                                _this.info = res.data
                            } else {
                                _this.$message.error(res.message)
                            }
                        })
                    }
                })
            },


        },
        destroyed () {

        }
    }
</script>
<style lang="less">
    .green,.red{
        font-size:14px; font-weight: bold; color: green;
    }
    .red{
        font-size:14px; font-weight: bold; color: red;
    }
</style>
